<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background: url(images/bg.jpg)   0px 0px;
        background-size: cover;
    }
    #hero{
        width: 30%;
        position: absolute;
        left: 50%;
        bottom:5%;
        margin-left: -15%;
       
    }
   



</style>
<body>
    <img src="images/hero.png"  id="hero"/>
    <script>
        var y=0;
        function  f(){
            y++;
            document.body.style.background=" url(images/bg.jpg)  0px  "+y+"px";
            document.body.style["background-size"]="cover";
        }
   var  bgTimer= setInterval(f,5);
      var bullets=[];
      var bid=0;//子弹ID
      function  sendbullet(){
          var bullet=document.createElement("img");
          bullet.src="images/bullet.png";
          bullet.style.width="6%";
          bullet.style.position="absolute";
          bullet.style.left="50%";
          bullet.style.bottom="15%";
          bullet.style["margin-left"]="-3%";
          bullet.id="b"+bid++;
          bullets.push(bullet);
          document.body.appendChild(bullet);
          }
    var  bulletTimer=setInterval(sendbullet,300);
    //子弹的飞行

    function bulletFly(){
        for(var i=0;i<bullets.length;i++){
            var b=bullets[i];
            b.style.bottom=(parseInt(b.style.bottom)+1)+"%";
            if(b.style.bottom>100){
                document.body.removeChild(b);
                bullets.splice(bullets.indexOf(b),1);
            }
   }
 }
  var bulletFly= setInterval( bulletFly,10);


  //
     function  f1(){
         var bge=new Audio();
         bge.src="audio/bgm.mp3 ";
         bge.play();
 }
  f1();
      
  </script>
    
</body>
</html>